<template>
	<view class="flex-c bgGray f1" style="min-height: 100%">
		<view class="m16 bgWhite radius8 shadow" style="padding: 20rpx 32rpx">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="旧密码" labelWidth="100" prop="oldPassword" borderBottom ref="item1">
					<u--input
						v-model="form.oldPassword"
						border="none"
						placeholder="请输入旧密码"
						type="password"
					></u--input>
				</u-form-item>
				<u-form-item label="新密码" labelWidth="100" prop="newPassword" borderBottom ref="item1">
					<u--input
						v-model="form.newPassword"
						border="none"
						placeholder="请输入新密码"
						type="password"
					></u--input>
				</u-form-item>
				<u-form-item label="确认新密码" labelWidth="100" prop="confirmPassword" ref="item1">
					<u--input
						v-model="form.confirmPassword"
						border="none"
						placeholder="请输入确认密码"
						type="password"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="m16"><button class="btn white" @click="attrSubmit">修改密码</button></view>
		<view class="ml16 mr16"><button class="btn white" @click="resetPwds">重置密码</button></view>
	</view>
</template>

<script>
import Utils from '@/utils/utils.js'
import { updatePwd, resetPwd } from '@/api/resetPwd.js'
export default {
	data() {
		return {
			form: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			rules: {
				oldPassword: {
					type: 'string',
					required: true,
					message: '旧密码不能为空',
					trigger: ['blur', 'change']
				},
				newPassword: [
					{
						type: 'string',
						required: true,
						message: '新密码不能为空',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							let reg = /^.{6,}$/
							return reg.test(value)
							//return uni.$u.test.mobile(value)
						},
						message: '密码不能少于6位',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				confirmPassword: [
					{
						type: 'string',
						required: true,
						message: '确认密码不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (this.form.newPassword !== value) {
								return false
							} else {
								return true
							}
						},
						message: '两次输入的密码不一致',
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		attrSubmit() {
			this.$refs.form1
				.validate()
				.then((res) => {
					//uni.$u.toast('校验通过')
					this.resetPwd()
				})
				.catch((errors) => {
					uni.$u.toast('校验失败')
				})
		},
		resetPwd() {
			//console.log('??', this.form.oldPassword, this.form.newPassword)
			updatePwd(this.form.oldPassword, this.form.newPassword).then(
				(res) => {
					if (res.code == 200) {
						uni.switchTab({
							url: '/pages/mine/mine',
							success: function () {
								setTimeout(() => {
									uni.showToast({
										title: '修改成功！',
										icon: 'none'
									})
								}, 300)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
					}
				},
				(err) => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
					console.log(err)
				}
			)
		},
		resetPwds() {
			Utils.showModel('你确定要重置成默认密码吗?').then(
				() => {
					resetPwd('123456').then((res) => {
						console.log(res)
						if (res.code == 200) {
							Utils.toast('密码重置成功，新密码为123456')
						}
					})
				},
				(err) => {
					console.log(err)
					console.log('取消')
				}
			)
		}
	}
}
</script>

<style lang="stylus" scoped>
.btn
	border-radius 50rpx
	background #c40414
	line-height 90rpx
</style>
